﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Basic Filter</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            sheet.isPaintSuspended(true);
            sheet.setRowCount(50);
            sheet.setColumnCount(8);
            var rc = sheet.getRowCount();
            var cc = sheet.getColumnCount();

            for (var r = 0; r < rc; r++) {
                for (var c = 0; c < cc; c++) {
                    if (c == 0) {
                        sheet.setValue(r, c, "Value is Number");
                    } else {
                        sheet.setValue(r, c, r + c);
                    }
                }
            }

            sheet.setValue(0, 0, "Conditions", spreadNS.SheetArea.colHeader);
            sheet.setValue(0, 1, "Cell Value", spreadNS.SheetArea.colHeader);

            sheet.setValue(1, 0, "Text contains e");
            sheet.setValue(10, 0, "Text doesn't contains e");
            sheet.setValue(21, 0, "Text contains e");
            sheet.setValue(1, 1, "begin");
            sheet.setValue(10, 1, "during");
            sheet.setValue(21, 1, "end");

            sheet.setValue(2, 0, "Background is Cyan");
            sheet.setValue(6, 0, "Background is Purple");
            sheet.setValue(12, 0, "Background is Cyan");
            sheet.getCell(2, 1).backColor("Cyan");
            sheet.getCell(6, 1).backColor("Purple");
            sheet.getCell(12, 1).backColor("Cyan");

            sheet.setValue(3, 0, "Value is Thursday");
            sheet.setValue(8, 0, "Value is Friday");
            sheet.setValue(14, 0, "Value is Thursday");
            sheet.setValue(3, 1, new Date(2011, 5, 30));
            sheet.setValue(8, 1, new Date(2011, 6, 1));
            sheet.setValue(14, 1, new Date(2011, 5, 30));

            sheet.setValue(4, 0, "Value is null");
            sheet.setValue(9, 0, "Value is null");
            sheet.setValue(18, 0, "Value is null");
            sheet.setValue(4, 1, null);
            sheet.setValue(9, 1, null);
            sheet.setValue(18, 1, null);

            sheet.setColumnWidth(0, 150);
            sheet.setColumnWidth(1, 150);

            var filter = new spreadNS.HideRowFilter(new spreadNS.Range(-1, 0, -1, 2));
            sheet.rowFilter(filter);
            filter.setShowFilterButton(false);

            sheet.isPaintSuspended(false);

            $("#text_conditon").click(function () {
                var sheet = spread.getActiveSheet();
                var filter = sheet.rowFilter();
                if (filter) {
                    filter.removeFilterItems(1);
                    if ($(this).prop("checked")) {
                        filter.addTextFilter(1, spreadNS.TextCompareType.Contains, "*e*");
                    }
                    filter.filter(1);
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });

            $("#number_conditon").click(function () {
                var sheet = spread.getActiveSheet();
                var filter = sheet.rowFilter();
                if (filter) {
                    filter.removeFilterItems(1);
                    if ($(this).prop("checked")) {
                        filter.addNumberFilter(1, spreadNS.GeneralCompareType.LessThan, 20)
                    }
                    filter.filter(1);
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });

            $("#date_conditon").click(function () {
                var sheet = spread.getActiveSheet();
                var filter = sheet.rowFilter();
                if (filter) {
                    filter.removeFilterItems(1);
                    if ($(this).prop("checked")) {
                        var dateExCondition = spreadNS.DateExCondition.fromWeek(4);
                        filter.addFilterItem(1, dateExCondition);
                    }
                    filter.filter(1);
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });

            $("#style_conditon").click(function () {
                var sheet = spread.getActiveSheet();
                var filter = sheet.rowFilter();
                if (filter) {
                    filter.removeFilterItems(1);
                    if ($(this).prop("checked")) {
                        filter.addBackgroundFilter(1, "Cyan");
                    }
                    filter.filter(1);
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });

            $("#custom_conditon").click(function () {
                var sheet = spread.getActiveSheet();
                var filter = sheet.rowFilter();
                if (filter) {
                    filter.removeFilterItems(1);
                    if ($(this).prop("checked")) {
                        var formulaCondition = new spreadNS.FormulaCondition(spreadNS.CustomValueType.Empty, null);
                        filter.addFilterItem(1, formulaCondition);
                    }
                    filter.filter(1);
                    sheet.invalidateLayout();
                    sheet.repaint();
                }
            });
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 400px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input type="checkbox" id="text_conditon" />
                <label for="text_conditon" style="display: inline-block; width: 210px;">Text Condition(Contains e)</label>
                <input type="checkbox" id="number_conditon" />
                <label for="number_conditon">Number Condition(less than 20)</label>
            </div>
            <div class="option-row">
                <input type="checkbox" id="date_conditon" />
                <label for="date_conditon" id="label_date_conditon" style="display: inline-block; width: 210px;">Date Condition (is Thursday)</label>
                <input type="checkbox" id="style_conditon" />
                <label for="style_conditon">Style Condition(Cyan background)</label>
            </div>
            <div class="option-row">
                <input type="checkbox" id="custom_conditon" />
                <label for="custom_conditon" id="label_custom_conditon">Customize Condition(Value is empty)</label>
            </div>
        </div>
    </div>
</body>
</html>
